<template>
  <div class="op-container">

    <div class="Related_container">

      <div class="set_box">

        <el-switch
          v-model="payWayState"
          :disabled="!authorityHandle(161)"
          style="display: block; margin-right:20px;margin-bottom:20px;"
          active-color="#3b425d"
          inactive-color="#E9EBF2"
          active-text="打开"
          inactive-text="关闭"
          :active-value="1"
          :inactive-value="0"
          @change="payWayStateChange()"
        />

        <div v-for="(item,index) in chargeSetting.itemList" :key="item.id" class="Recharge_Data">
          <div class="Recharge_Data_box">
            <span>消费档位:</span>
            <el-input v-model.number="item.rechargeAmount" :readonly="!authorityHandle(161)" style="margin-right:20px" />
            <span>消费赠送:</span>
            <el-input v-model.number="item.givePercent" :readonly="!authorityHandle(161)" /> %
          </div>
          <div class="operation">
            <i v-if="authorityHandle(161)" v-show="index != 0" class="el-icon-remove" @click="Delete(item.id)" />
            <i v-if="authorityHandle(161)" v-show="index == chargeSetting.itemList.length - 1" class="el-icon-circle-plus" @click="newly_added()" />
          </div>
        </div>
      </div>

    </div>

    <div class="footer">
      <button v-if="authorityHandle(161)" class="btnStyle" @click="save">保存</button>
    </div>

  </div>

</template>

<script>
import { getSettingItem, getRechargeStatus, upDateRechargeStatus, saveSettingItem } from '@/api/settings/paysetting'
export default {
  components: {},
  data() {
    return {
      payType: 13,
      payWayState: 1,
      chargeSetting: { // 首充赠送
        id: 13,
        itemList: [{
          rechargeAmount: undefined, // 消费挡位',
          givePercent: undefined // 消费赠送'
        }]
      }
    }
  },

  created() {
    this.getSettingItem()
    this.getPayState()
  },

  methods: {
    getSettingItem() {
      getSettingItem({ 'id': this.payType }).then(res => {
        this.chargeSetting.itemList = res.data
      })
    },
    // 获取支付方式开关
    getPayState() {
      getRechargeStatus({ 'id': this.payType }).then(res => {
        this.payWayState = res.data === true ? 1 : 0
        this.$log(res.data, this.payWayState)
      })
    },
    // 支付方式开关
    // wx(1,"微信"),
    // zfb(2,"支付宝"),
    // wxOther(3,"第四方微信"),
    // zfbOther(4,"第四方支付宝");
    payWayStateChange() {
      upDateRechargeStatus({ 'id': this.payType }).then(res => {
        this.$log(res)
      })
    },
    save() {
      saveSettingItem(this.chargeSetting).then(res => {
        this.$message.success('保存成功')
      })
    },
    // 设置新增
    newly_added() {
      this.chargeSetting.itemList.push({
        id: undefined,
        rechargeAmount: undefined, // 消费挡位',
        givePercent: undefined // 消费赠送'
      })
    },
    // 设置删除
    Delete(value) {
      var index = this.chargeSetting.itemList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.chargeSetting.itemList.splice(index, 1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$mainColor:#3b425d;// 主色调
$disabledColor: #909399; //禁用色
$hoverColor:#1D143C;// 鼠标停留主色调浅色

.op-container{
  margin: 20px;
  .Related_container {
    width: 900px;
    height: 500px;
    padding: 60px 0;
    border-radius: 10px;
    border: 1px dashed #ccc;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-input__inner:focus {
      border-color: #3b425d
    }
  .set_box {
    width: 500px;
    padding: 0 20px;
    box-sizing: border-box;

    .Recharge_Data {
      width: 100%;
      height: 40px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      color: #000;

      .Recharge_Data_box {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-input {
          width: 150px;
          height: 35px;

          input {
            width: 150px;
            height: 35px;
          }
        }
        span {
          font-size: 14px;
          width: 150px;
        }
      }

      .operation {
        width: 12%;
        display: flex;
        justify-content: space-between;
        .el-icon{
            &-circle-plus, &-remove{
              font-size: 22px;
              color:#3b425d;
              margin-left: 10px;

          }
        }
      }
     }
    }
  }
  .footer {
    text-align: center;
    margin-top: 30px;
  }
}

</style>
